<template>
  <div>
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input
          v-model="searchData.nickName"
          clearable
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="searchData.role" placeholder="选择角色">
          <el-option label="全部" :value="0" />
          <el-option
            v-for="item in roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="50px" />
      <el-table-column prop="nickName" label="姓名" />
      <!-- <el-table-column prop="role" label="角色" /> -->
      <el-table-column label="角色">
        <template #default="scope">
          <el-button link v-for="item in scope.row.role" :key="item.role">{{
            item.roleName
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="changeUser(scope.row)" >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="isShow" title="编辑信息">
    <el-form :model="active">
      <el-form-item label="姓名" label-width="50px">
        <el-input v-model="active.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" label-width="50px">
        <el-select multiple v-model="active.role" placeholder="请选择角色">
            <el-option
            v-for="item in roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="updateUser"
          >更改</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";

import { getUserList, getRoleList } from "../request/api";
import { UserInitData, UserListInt } from "../type/user";

export default defineComponent({
  setup() {
    const data = reactive(new UserInitData());

    onMounted(() => {
      getUser();
      getRole();
    });
    // funcation
    const getUser = () => {
      getUserList().then((res) => {
        // console.log('yongh', res)
        data.list = res.data;
      });
    };
    const getRole = () => {
      getRoleList().then((res) => {
        //  console.log(res)
        data.roleList = res.data;
      });
    };

    const onSubmit = () => {
      // console.log(data.searchData.nickName)
      // console.log(data.searchData.role)
      let arr: UserListInt[] = []; // 定义数组，用来接收查询过后要展示的数据
      if (data.searchData.nickName || data.searchData.role) {
        if (data.searchData.nickName) {
          arr = data.list.filter((value) => {
            return value.nickName.indexOf(data.searchData.nickName) !== -1;
          });
        }
        if (data.searchData.role) {
          arr = (data.searchData.nickName ? arr: data.list).filter((value) => {
            return value.role.find((item)=>item.role===data.searchData.role)
          });
        }
      } else {
        arr = data.list;
      }
      data.list = arr;
    };


    const changeUser = (row:UserListInt)=>{
        // console.log(row)
        data.isShow = true
        data.active = {
            id: row.id,
            nickName: row.nickName,
            userName: row.userName,
            role:row.role.map((value:any)=>value.role || value.roleId)
        }
    }

    const updateUser = ()=>{
        // console.log(data.active)
        let obj:any = data.list.find((value)=>value.id == data.active.id)
        obj.nickName = data.active.nickName
        obj.role = data.roleList.filter((value)=>data.active.role.indexOf(value.roleId) !== -1)
        data.list.forEach((item, i)=>{
            if(item.id === obj.id){
                data.list[i] =obj
            }
        })
        data.isShow = false
    }
     // 监听输入框内容为空时则复原数据
     watch(
      [
        () => {
          return data.searchData.nickName;
        },
        () => data.searchData.role,
      ],
      () => {
        // console.log(data.searchData.title);
        if (!data.searchData.nickName && data.searchData.role == 0) {
          // 接口请求数据
          getUser();
        }
      }
    );

    return { ...toRefs(data), onSubmit, changeUser, updateUser };
  },
});
</script>

<style scoped></style>
